<div class="editor-row">
	<div ng-repeat="target in panel.targets"
		 class="grafana-target"
		 ng-class="{'grafana-target-hidden': target.hide}"
		 ng-controller="KairosDBTargetCtrl"
		 ng-init="init()">

		<div class="grafana-target-inner">
			<ul class="grafana-target-controls">
				<li>
					<a bs-tooltip="'Group by\'s are always executed before aggregations!'"
					   ng-click="alert('Group by\'s are always executed before aggregations!')">
						<i class="icon-info"></i>
					</a>
				</li>
				<li class="dropdown">
					<a class="pointer dropdown-toggle"
					   data-toggle="dropdown"
					   tabindex="1">
						<i class="icon-cog"></i>
					</a>
					<ul class="dropdown-menu pull-right" role="menu">
						<li role="menuitem">
							<a tabindex="1"
							   ng-click="duplicate()">
								Duplicate
							</a>
						</li>
						<li role="menuitem">
							<a tabindex="1"
							   ng-click="moveMetricQuery($index, $index-1)">
								Move up
							</a>
						</li>
						<li role="menuitem">
							<a tabindex="1"
							   ng-click="moveMetricQuery($index, $index+1)">
								Move down
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a class="pointer" tabindex="1"
					   ng-click="removeDataQuery(target)">
						<i class="icon-remove"></i>
					</a>
				</li>
			</ul>

			<ul class="grafana-segment-list">
				<li class="grafana-target-segment"
					style="min-width: 15px; text-align: center">
					{{targetLetters[$index]}}
				</li>
				<li>
					<a class="grafana-target-segment"
					   ng-click="target.hide = !target.hide; targetBlur();"
					   role="menuitem">
						<i class="icon-eye-open"></i>
					</a>
				</li>
			</ul>

			<!-- USEFUL STUFF -->

			<ul class="grafana-segment-list" role="menu">
				<!-- METRIC NAME -->
				<li>
					<input type="text"
						   class="input-medium grafana-target-text-input"
						   ng-model="target.alias"
						   spellcheck='false' placeholder="alias"
						   ng-blur="targetBlur()">
				</li>
				<li>
					<select style="width: 20em"
							class="input-medium grafana-target-segment-input"
							ng-change="targetBlur()"
							ng-model="metric.value"
							bs-tooltip="metricValue.length > 40 ? metricValue : ''"
							ng-options="f for f in metric.list">
						<option value="">--select metric--</option>
					</select>
					<a bs-tooltip="target.errors.metric"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.metric">
						<i class="icon-warning-sign"></i>
					</a>
				</li>
				<li class="grafana-target-segment">
					&nbsp;Peak filter
					<input
							class="input-medium grafana-target-text-input"
							type="checkbox"
							ng-model="target.exOuter"
							ng-change="targetBlur()">
				</li>


				<!-- DOWN SAMPLING (auto horizontal aggregation) -->
				<!--            <li class="grafana-target-segment">
								Downsampling with
							</li>
							<li>
								<select class="input-medium grafana-target-segment-input" ng-change="targetBlur()" ng-model="target.downsampling" ng-options="f for f in ['(NONE)','avg', 'sum', 'min', 'max', 'dev']" ></select>
							</li>-->

				<!-- SAMPLING RATE -->
				<!-- <li ng-hide="target.downsampling=='(NONE)'" class="grafana-target-segment">
						every
					</li>
					<li>
						<input type="text"
							   ng-hide="target.downsampling=='(NONE)'"
							   class="input-mini grafana-target-segment-input"
							   ng-model="target.sampling"
							   placeholder="{{interval}}"
							   bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
							   spellcheck='false'
							   ng-blur="targetBlur()" >
						<a bs-tooltip="target.errors.sampling"
						   style="color: rgb(229, 189, 28)"
						   ng-show="target.errors.sampling">
							<i class="icon-warning-sign"></i>
						</a>
					</li>
		-->
			</ul>

			<div class="clearfix"></div>

		</div>

		<!-- Second line -->

		<div class="grafana-target-inner">
			<ul class="grafana-segment-list" role="menu">
				<!-- TAGS  filtering -->
				<li class="grafana-target-segment">
					:
				</li>
				<li class="grafana-target-segment">
					Filter by Tag:
				</li>
				<li ng-repeat="(key, value) in target.tags track by $index"
					class="grafana-target-segment">
					{{key}}&nbsp;=&nbsp;{{value}}
					<a ng-click="removeFilterTag(key)">
						<i class="icon-remove"></i>
					</a>
				</li>

				<li class="grafana-target-segment" ng-hide="addFilterTagMode">
					<a ng-click="addFilterTag()">
						<i class="icon-plus-sign"></i>
					</a>
				</li>

				<li ng-show="addFilterTagMode">
					<input type="text"
						   class="input-small grafana-target-segment-input"
						   spellcheck='false'
						   bs-typeahead="suggestTagKeys"
						   ng-change="validateFilterTag()"
						   data-min-length=0 data-items=100
						   ng-model="target.currentTagKey"
						   placeholder="key">
				</li>
				<li ng-show="addFilterTagMode">
					<input type="text"
						   class="input-small grafana-target-segment-input"
						   spellcheck='false'
						   bs-typeahead="suggestTagValues"
						   ng-change="validateFilterTag()"
						   data-min-length=0 data-items=100
						   ng-model="target.currentTagValue"
						   placeholder="value">
					<a bs-tooltip="target.errors.tags"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.tags">
						<i class="icon-warning-sign"></i>
					</a>
				<li class="grafana-target-segment" ng-show="addFilterTagMode">
					<a ng-click="addFilterTag()">
						<i ng-show="target.errors.tags" class="icon-remove"></i>
						<i ng-hide="target.errors.tags"
						   class="icon-plus-sign"></i>
					</a>
				</li>
				</li>


				<!-- TAGS  GROUP BYS -->
				<li class="grafana-target-segment">
					Group by
				</li>

				<li class="grafana-target-segment" ng-show="target.groupByTags">
					tags:
				</li>

				<li ng-repeat="key in target.groupByTags track by $index"
					class="grafana-target-segment">
					{{key}}
					<a ng-click="removeGroupByTag($index)">
						<i class="icon-remove"></i>
					</a>
				</li>


				<li class="grafana-target-segment"
					ng-show="target.groupByTags && target.nonTagGroupBys">
					and by:
				</li>

				<li ng-repeat="groupByObject in target.nonTagGroupBys track by $index"
					class="grafana-target-segment">
					{{_.values(groupByObject)}}
					<a ng-click="removeNonTagGroupBy($index)">
						<i class="icon-remove"></i>
					</a>
				</li>

				<li class="grafana-target-segment" ng-hide="addGroupByMode">
					<a ng-click="addGroupBy()">
						<i class="icon-plus-sign"></i>
					</a>
				</li>
				<li ng-show="addGroupByMode">
					<select class="input-small grafana-target-segment-input"
							ng-change="changeGroupByInput()"
							ng-model="target.currentGroupByType"
							ng-options="f for f in ['tag','value','time']"></select>
				</li>
				<li ng-show="isTagGroupBy">
					<input type="text"
						   class="input-small grafana-target-segment-input"
						   spellcheck='false'
						   bs-typeahead="suggestTagKeys"
						   ng-change="validateGroupBy()"
						   data-min-length=0 data-items=100
						   ng-model="target.groupBy.tagKey"
						   placeholder="key">
					<a bs-tooltip="target.errors.groupBy.tagKey"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.groupBy.tagKey">
						<i class="icon-warning-sign"></i>
					</a>
				</li>
				<li ng-show="isValueGroupBy">
					<input type="text"
						   class="input-mini grafana-target-segment-input"
						   spellcheck='false'
						   ng-model="target.groupBy.valueRange"
						   placeholder="range"
						   bs-tooltip="'Range on which values are considered in the same group'"
						   ng-change="validateGroupBy()">
					<a bs-tooltip="target.errors.groupBy.valueRange"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.groupBy.valueRange">
						<i class="icon-warning-sign"></i>
					</a>
				</li>
				<li ng-show="isTimeGroupBy">
					<input type="text"
						   class="input-mini grafana-target-segment-input"
						   ng-model="target.groupBy.timeInterval"
						   ng-init="target.groupBy.timeInterval='1s'"
						   placeholder="interval"
						   bs-tooltip="'Duration of time groups'"
						   spellcheck='false'
						   ng-change="validateGroupBy()">
					<a bs-tooltip="target.errors.groupBy.timeInterval"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.groupBy.timeInterval">
						<i class="icon-warning-sign"></i>
					</a>
				</li>
				<li ng-show="isTimeGroupBy">
					<input type="text"
						   class="input-mini grafana-target-segment-input"
						   ng-model="target.groupBy.groupCount"
						   placeholder="Count"
						   bs-tooltip="'Number of time groups to be formed'"
						   spellcheck='false'
						   ng-change="validateGroupBy()">
					<a bs-tooltip="target.errors.groupBy.groupCount"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.groupBy.groupCount">
						<i class="icon-warning-sign"></i>
					</a>
				</li>
				<li class="grafana-target-segment" ng-show="addGroupByMode">
					<a ng-click="addGroupBy()">
						<i ng-hide="isGroupByValid" class="icon-remove"></i>
						<i ng-show="isGroupByValid" class="icon-plus-sign"></i>
					</a>
				</li>


				<!-- HORIZONTAL AGGREGATION -->
				<li class="grafana-target-segment">
					Aggregation:
				</li>
				<li ng-repeat="aggregatorObject in target.horizontalAggregators track by $index"
					class="grafana-target-segment">
					{{aggregatorObject.name}}&#40;
    <span ng-repeat="aggKey in _.keys(_.omit(aggregatorObject,'name'))"
		  bs-tooltip="aggKey">
        {{$last?aggregatorObject[aggKey]:aggregatorObject[aggKey]+","}}
    </span>
					&#41;
					<a ng-click="removeHorizontalAggregator($index)">
						<i class="icon-remove"></i>
					</a>
				</li>

				<li class="grafana-target-segment"
					ng-hide="addHorizontalAggregatorMode">
					<a ng-click="addHorizontalAggregator()">
						<i class="icon-plus-sign"></i>
					</a>
				</li>

				<li ng-show="addHorizontalAggregatorMode">
					<select class="input-medium grafana-target-segment-input"
							ng-change="changeHorAggregationInput()"
							ng-model="target.currentHorizontalAggregatorName"
							ng-options="f for f in ['avg','dev','max','min','rate','sampler','count','sum','least_squares','percentile','scale','div']"></select>
				</li>

				<!-- Different parameters -->
				<li ng-show="hasSamplingRate" class="grafana-target-segment">
					every
				</li>
				<li ng-show="hasSamplingRate">
					<input type="text"
						   class="input-mini grafana-target-segment-input"
						   ng-model="target.horAggregator.samplingRate"
						   ng-init="target.horAggregator.samplingRate='1s'"
						   spellcheck='false'
						   ng-change="validateHorizontalAggregator()">
					<a bs-tooltip="target.errors.horAggregator.samplingRate"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.horAggregator.samplingRate">
						<i class="icon-warning-sign"></i>
					</a>
				</li>

				<li ng-show="hasUnit" class="grafana-target-segment">
					every
				</li>
				<li ng-show="hasUnit">
					<select class="input-medium grafana-target-segment-input"
							ng-model="target.horAggregator.unit"
							ng-init="target.horAggregator.unit='millisecond'"
							ng-options="f for f in ['millisecond','second','minute','hour','day','week','month','year']"></select>
				</li>

				<li ng-show="hasFactor" class="grafana-target-segment">
					by
				</li>
				<li ng-show="hasFactor">
					<input type="text"
						   class="input-mini grafana-target-segment-input"
						   ng-model="target.horAggregator.factor"
						   ng-init="target.horAggregator.factor='1'"
						   spellcheck='false'
						   ng-change="validateHorizontalAggregator()">
					<a bs-tooltip="target.errors.horAggregator.factor"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.horAggregator.factor">
						<i class="icon-warning-sign"></i>
					</a>
				</li>

				<li ng-show="hasPercentile" class="grafana-target-segment">
					percentile
				</li>
				<li ng-show="hasPercentile">
					<input type="text"
						   class="input-mini grafana-target-segment-input"
						   ng-model="target.horAggregator.percentile"
						   ng-init="target.horAggregator.percentile='0.75'"
						   spellcheck='false'
						   ng-change="validateHorizontalAggregator()">
					<a bs-tooltip="target.errors.horAggregator.percentile"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.horAggregator.percentile">
						<i class="icon-warning-sign"></i>
					</a>
				</li>

				<li class="grafana-target-segment"
					ng-show="addHorizontalAggregatorMode">
					<a ng-click="addHorizontalAggregator()">
						<i ng-hide="isAggregatorValid" class="icon-remove"></i>
						<i ng-show="isAggregatorValid"
						   class="icon-plus-sign"></i>
					</a>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>


	</div>
</div>
<section class="grafana-metric-options">
	<div class="grafana-target" ng-controller="KairosDBTargetCtrl">
		<div class="grafana-target-inner">
			<ul class="grafana-segment-list">
				<li class="grafana-target-segment">
					Downsampling with
				</li>
				<li>
					<select class="input-medium grafana-target-segment-input"
							ng-change="panelBlur()"
							ng-model="panel.downsampling"
							ng-options="f for f in ['(NONE)','avg', 'sum', 'min', 'max', 'dev']"></select>
				</li>

				<!-- SAMPLING RATE -->
				<li ng-hide="panel.downsampling=='(NONE)'"
					class="grafana-target-segment">
					every
				</li>
				<li>
					<input type="text"
						   ng-hide="panel.downsampling=='(NONE)'"
						   class="input-mini grafana-target-segment-input"
						   ng-model="panel.sampling"
						   placeholder="{{interval}}"
						   bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
						   spellcheck='false'
						   ng-blur="panelBlur()">
					<a bs-tooltip="target.errors.sampling"
					   style="color: rgb(229, 189, 28)"
					   ng-show="target.errors.sampling">
						<i class="icon-warning-sign"></i>
					</a>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
</section>
